<script setup lang="ts">
/**
 * 引入组件和状态管理库
 */
import DropContent from '@/components/dragdrop/DropContent.vue';
import PreviewLayout from '@/components/dragdrop/PreviewLayout.vue';
import demoList from '@/components/schema';
import { ref } from 'vue';
import LeftSidebar from './LeftSidebar.vue';
/**
 * 引入Pinia状态管理
 */
import useDragStore from '@/Store/dragStore';
import { storeToRefs } from 'pinia';
/**
 * 初始化状态管理器
 */
const dragStore = useDragStore();
/**
 * 从状态管理器中读取数据
 */
const { dragShowData } = storeToRefs(dragStore);
/**
 * 创建DropContent组件的引用
 */
const dropContentRef = ref<InstanceType<typeof DropContent>>();
</script>
<template>
    <div class="drag-container">
        <div class="drag-container__left">
            <!-- 左侧边栏，展示可拖拽元素列表 -->
            <LeftSidebar :list="demoList" group-name="drag-demo" />
        </div>
        <div class="drag-container__right">
            <!-- 可拖放内容区域 -->
            <div class="mb16" style="width: 100%; height: 100%">
                <DropContent
                    v-model="dragShowData"
                    ref="dropContentRef"
                    group-name="drag-demo"
                    :row="16"
                    :column="9"
                    :gap="4"
                >
                    <!-- 预览项模板 -->
                    <template #preview-item="{ dragShowData }">
                        <div
                            style="
                                height: 100%;
                                background: #f9f1c7;
                                border-radius: 6px;
                            "
                        >
                            qqq
                        </div>
                    </template>
                    <!-- 移动遮罩模板 -->
                    <template #move-mask="{ isPutDown }">
                        <div
                            :style="{
                                width: '100%',
                                height: '100%',
                                border: '2px solid #2867f979',
                                backgroundColor: isPutDown
                                    ? '#2867f91c'
                                    : '#ff000055',
                                borderColor: isPutDown
                                    ? '#2c68f3'
                                    : '#ff000079',
                                'border-radius': '6px',
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center',
                                fontWeight: '600'
                            }"
                        >
                            {{ isPutDown ? '可以放置' : '不可放置' }}
                        </div>
                    </template>
                </DropContent>
            </div>
            <!-- 行操作按钮 -->
            <div class="mb16">
                <button @click="() => dropContentRef.addRow()">添加行</button>
                <button @click="() => dropContentRef.deleteRow()">
                    删除行
                </button>
            </div>
            <!-- 预览区域 -->
            <h3 class="mb16">预览</h3>
            <div style="width: 100%; height: 100%">
                <PreviewLayout
                    :data="dragShowData"
                    :row="16"
                    :column="9"
                    :gap="4"
                    :skipEmpty="false"
                />
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
/**
 * 定义拖放容器样式
 */
.drag-container {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    flex-shrink: 0;

    &__left {
        width: 260px;
    }

    &__right {
        flex: 1;
        width: 0;
        background: #032bfb1a;
        border-radius: 6px;
        padding: 20px;
        height: 100%;
        overflow-y: auto;
    }
}
</style>
